@charset "UTF-8";

//
// @copyright        2017 opencart.cn - All Rights Reserved
// @link             http://www.guangdawangluo.com
// @author           Pu shuo <pushuo@opencart.cn>
// @created          2017-10-10 16:44:05
// @modified         2017-12-13 09:50:59
//



//@media (max-width: $screen-xs-max) {
//    .product-wrapper .product-layout.col-xs-6:nth-child(2n+2) .product-thumb{
//        border-right: $default-border;
//    }
//
//    .product-wrapper .product-layout.col-xs-6:nth-child(1) .product-thumb{
//        border-top: $default-border;
//    }
//    .product-wrapper .product-layout.col-xs-6:nth-child(2) .product-thumb{
//        border-top: $default-border;
//    }
//
//    .product-wrapper .product-layout .product-thumb .image{
//
//        //height: 360px;
//    }
//}
//
//@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
//    //.product-wrapper .product-layout.col-sm-6:nth-child(2n+1) .product-thumb,
//
//
//    .product-wrapper .product-layout.col-sm-2:nth-child(6n+6) .product-thumb,
//    .product-wrapper .product-layout.col-sm-3:nth-child(4n+4) .product-thumb,
//    .product-wrapper .product-layout.col-sm-6:nth-child(2n+2) .product-thumb,
//    .product-wrapper .product-layout.col-sm-4:nth-child(3n+3) .product-thumb{
//        border-right: $default-border;
//    }
//
//    .product-wrapper .product-layout.col-sm-6:nth-child(1) .product-thumb,
//    .product-wrapper .product-layout.col-sm-6:nth-child(2) .product-thumb,
//    .product-wrapper .product-layout.col-sm-4:nth-child(1) .product-thumb,
//    .product-wrapper .product-layout.col-sm-4:nth-child(2) .product-thumb,
//    .product-wrapper .product-layout.col-sm-4:nth-child(3) .product-thumb{
//        border-top: $default-border;
//    }
//
//    .product-wrapper .product-layout .product-thumb .image{
//
//        //height: 360px;
//    }
//}
//
//@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
//    .product-wrapper .product-layout.col-md-3:nth-child(4n+4) .product-thumb,
//    .product-wrapper .product-layout.col-md-4:nth-child(3n+3) .product-thumb{
//        border-right: $default-border;
//    }
//
//    .product-wrapper .product-layout.col-md-4:nth-child(1) .product-thumb,
//    .product-wrapper .product-layout.col-md-4:nth-child(2) .product-thumb,
//    .product-wrapper .product-layout.col-md-4:nth-child(3) .product-thumb,
//    .product-wrapper .product-layout.col-md-3:nth-child(1) .product-thumb,
//    .product-wrapper .product-layout.col-md-3:nth-child(2) .product-thumb,
//    .product-wrapper .product-layout.col-md-3:nth-child(3) .product-thumb,
//    .product-wrapper .product-layout.col-md-3:nth-child(4) .product-thumb{
//        border-top: $default-border;
//    }
//
//}
//
//@media (min-width: $screen-lg-min) {
//    .product-wrapper .product-layout.col-lg-4:nth-child(3n+3) .product-thumb,
//    .product-wrapper .product-layout.col-lg-3:nth-child(4n+4) .product-thumb{
//        border-right: $default-border;
//    }
//
//    .product-wrapper .product-layout.col-lg-4:nth-child(1) .product-thumb,
//    .product-wrapper .product-layout.col-lg-4:nth-child(2) .product-thumb,
//    .product-wrapper .product-layout.col-lg-4:nth-child(3) .product-thumb,
//    .product-wrapper .product-layout.col-lg-3:nth-child(1) .product-thumb,
//    .product-wrapper .product-layout.col-lg-3:nth-child(2) .product-thumb,
//    .product-wrapper .product-layout.col-lg-3:nth-child(3) .product-thumb,
//    .product-wrapper .product-layout.col-lg-3:nth-child(4) .product-thumb{
//        border-top: $default-border;
//    }
//}

//.product-wrapper .product-layout:last-child .product-thumb{
//    border-right: $default-border;
//}

//.product-wrapper .product-list:last-child .product-thumb{
//    border-right: 1px solid transparent;
//}

.product-wrapper{
    .product-layout{
        &.product-grid{
            padding-left: 14px;
            padding-right: 14px;
            .product-thumb{
                border: 1px solid #E6E6E6;
                margin-bottom: 28px;
                padding: 14px 17px 16px;
                .caption{
                    padding-top: 8px;
                    .product-name{
                        font-size:12px;
                        line-height:16px;
                        margin-bottom: 4px;
                        a{
                            color: #888888;
                        }
                    }
                    .product-description{
                        display: none;
                    }
                    .price{
                        margin-bottom: 12px;
                        height:23px;
                        font-size:18px;
                        font-weight:300;
                        line-height:24px;
                        color:$brand-primary;
                        .price-old{
                            padding-left: 4px;
                            height:290px;
                            background:rgba(255,255,255,1);
                            text-decoration: line-through;
                            color: #E6E6E6;
                            margin: 0;
                            font-size: 12px;
                        }
                    }
                }

            }
        }
        &.product-list {
            .product-thumb {
                height: 240px;
                border-top: 1px solid #E6E6E6;
                padding-top: 20px;
                padding-bottom: 20px;
                padding-left: 20px;
                padding-right: 42px;
                .image {
                    float: left;
                    height: auto;
                    width: 200px;
                }

                .caption {
                    margin-left: 220px;
                    .product-description {
                        height:38px;
                        font-size:14px;
                        line-height:19px;
                        color:#CCCCCC;
                        opacity:1;
                        margin-bottom: 34px;
                    }
                    .product-name {
                        font-size:16px;
                        font-weight:400;
                        line-height:21px;
                        margin-bottom: 8px;
                        a{
                            color:#888888;
                        }
                    }
                    .price{
                        height:25px;
                        font-size:20px;
                        line-height:26px;
                        color:rgba(191,2,2,1);
                        font-weight: lighter;
                        .price-old{
                            padding-left: 4px;
                            height:290px;
                            text-decoration: line-through;
                            color: #DFDFDF;
                            margin: 0;
                        }
                    }
                }

                .button-group {
                    margin-left: 220px;
                    .btn.compare{
                        width: 59px;
                        height: 35px;
                    }
                    .favor{
                        margin-left: 5px;
                        width:32px;
                        height:32px;
                        &>img{
                            width:32px;
                            height:32px;
                        }
                    }
                }
            }
        }

        .product-thumb {
            position: relative;
            background-color: #fff;
            padding-bottom: 22px;
            width: 100%;
            .image {
                position: relative;
                a {
                    img{
                        width: 100%;
                        height: auto;
                        @include transition(all .3s ease);
                    }
                }
                /*试戴的标识图标*/
                .tryon-icon {
                    width: 46px;
                    height: 46px;
                    line-height: 68px;
                    text-align: center;
                    font-size: 12px;
                    color: #fff;
                    background-image: url("/catalog/view/theme/jd/image/icon/3d_tryon.svg");
                    background-repeat: no-repeat;
                    background-size: cover;
                    pointer-events: none;
                }
            }


            &:hover {
                .image > a > img{
                    -ms-transform: scale(1.05);
                    -webkit-transform: scale(1.05);
                    -o-transform: scale(1.05);
                    -moz-transform: scale(1.05);
                    transform: scale(1.05);
                }
            }

            .caption{
                .product-name{
                    a{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;
                        display: block;
                    }
                }
            }

            .rating {
                position: relative;
                padding-bottom: 19px;

                &:before {
                    position: absolute;
                    content: "";
                    top: 28px;
                    left: 0;
                    height: 1px;
                    width: 100px;
                    background: #ddd;
                }
            }

            .button-group {

                .favor{
                    width:20px;
                    height:20px;
                    background-image: url("/catalog/view/theme/jd/image/icon/icon_Collection_default.svg");
                    background-size: 100%;

                    &:hover{
                        opacity: 0.9;
                    }
                    &.is-favor{
                        background-image: url("/catalog/view/theme/jd/image/icon/icon_collection_active.svg");
                    }
                }

                .btn {
                    padding: 0;
                    border: none;
                    @media (max-width: 376px) {
                        padding: 4px 10px;
                        font-size: 12px;
                    }
                    &:hover{
                        background-color: transparent;
                    }
                }
                .btn.compare{
                    width: 38px;
                    height: 22px;
                    background-image: url("/catalog/view/theme/jd/image/icon/icon_compare.svg");
                    background-size: 100%;
                    &:hover{
                        opacity: 0.9;
                    }
                    &.disabled{
                        background-image: url("/catalog/view/theme/jd/image/icon/icon_compare_disabled.svg");
                        &:hover{
                            opacity: initial;
                        }
                    }
                }
            }

        }
    }
}





//



